<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>可视化之热力图</title>
    <script src="../../../assets/ol/v5.3.0/ol.js"></script>
    <script src="../../../assets/script/jquery-2.1.1.min.js"></script>
    <script src="../../../assets/script/proj4.js"></script>
    <link rel="stylesheet" href="../../../assets/ol/v5.3.0/ol.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map {
            position: absolute;
            top: 50px;
            bottom: 0;
            width: 100%;
        }

        #top-content {
            position: absolute;
            width: 100%;
            height: 50px;
            background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
            color: #fff;
        }

        .heatmap-set {
            position: absolute;
            line-height: 50px;
            width: 30%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            background: #00000063;
            border-radius: 5px;
            font-weight: bold;
        }

        input[type='text'] {
            padding: 0 10px;
            height: 25px;
            border: none;
            border-radius: 2.5px;
        }

        input[type='text']:focus-visible {
            outline: 2px solid #8BC34A;
        }
    </style>
</head>

<body>
<div id="map" title="地图显示"></div>
<div id="top-content">
    <div class="heatmap-set">
        <label>半径：</label><input type="text" class="radius-input">
        <label>模糊尺寸：</label><input type="range" step="1" class="size-input" min="1" max="100">
    </div>
</div>
<script src="../../../assets/script/v5.3.0-common.js"></script>
</body>
<script>
    loadTdtMapLayer();
    const radiusInput = document.querySelector(".radius-input")
    const sizeInput = document.querySelector(".size-input")
    // 创建热力图图层
    const heatmapLayer = new ol.layer.Heatmap({
        source: new ol.source.Vector({
            url: "../../../data/2012_Earthquakes_Mag5.kml",
            format: new ol.format.KML({
                extractStyles: false
            }),
            wrapX: false
        }),
        radius: parseInt(radiusInput.value) || 8, // 热点半径（单位像素）
        blur: parseInt(sizeInput.value) || 15 // 模糊半径（单位像素）
    })
    map.addLayer(heatmapLayer)
    // 监听input值改变事件
    radiusInput.addEventListener("input", () => {
        heatmapLayer.setRadius(parseInt(radiusInput.value))
    })
    sizeInput.addEventListener("input", () => {
        heatmapLayer.setBlur(parseInt(sizeInput.value))
    })
</script>

</html>